<template>
    <div id="user">
        <div class="profile">
            <div>
                <nut-row>
                    <nut-col :span="12">
                        <p style="float: left;">姓名</p>
                    </nut-col>
                    <nut-col :span="12">
                        <p style="float: right; color: rgba(48, 48, 48, 0.5);">{{ profile.name }}</p>
                    </nut-col>
                </nut-row>
                <nut-row>
                    <nut-col :span="12">
                        <p style="float: left;">{{ role == 0 ? "学号" : "工号"}}</p>
                    </nut-col>
                    <nut-col :span="12">
                        <p style="display: flex; float: right; color: rgba(48, 48, 48, 0.5);">{{ profile.id }}</p>
                    </nut-col>
                </nut-row>
            </div>
        </div>

        <!-- 二维马 -->
        <div id="qrcode" class="qr-style" @click="toHealthCommit"></div>
        <div style="color: #fff">点击二维码可进行健康申报</div>
        <div class="profile" @click="toRest">
            <nut-row>
                    <nut-col :span="24">
                        <p :style="tipTextInf.style">{{ tipTextInf.text }}</p>
                    </nut-col>
            </nut-row>
        </div>

        <div class="profile">
            <div>
                <nut-row>
                    <nut-col :span="12">
                        <p style="float: left;">核酸信息</p>
                    </nut-col>
                    <nut-col :span="12">
                        <p style="float: right; color: rgba(48, 48, 48, 0.5);">{{ profile.virustest }}</p>
                    </nut-col>
                </nut-row>
                <nut-row>
                    <nut-col :span="12">
                        <p style="float: left;">行程信息</p>
                    </nut-col>
                    <nut-col :span="12">
                        <p style="display: flex; float: right; color: rgba(48, 48, 48, 0.5);">{{ profile.trip }}</p>
                    </nut-col>
                </nut-row>
            </div>
        </div>
        <div class="profile" style="margin: 2vh;">
            <div>
                <nut-grid column-num="2" :border="false">
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>较昨日</p>
                                <p style="color: #f63440">{{ (epidemicInf.confirmedIncr > 0 ? "+" : "") + epidemicInf.confirmedIncr}}</p>
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #f63440;">{{ epidemicInf.confirmedCount }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            累计确诊
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>较昨日</p> 
                                <p style="color: #2db7a3;">{{ (epidemicInf.curedIncr > 0 ? "+" : "") + epidemicInf.curedIncr}}</p> 
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #2db7a3;">{{ epidemicInf.curedCount }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            累计治愈
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>较昨日</p>
                                <p style="color: #f5750f;">{{ (epidemicInf.currentConfirmedIncr > 0 ? "+" : "") + epidemicInf.currentConfirmedIncr}}</p>
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #f5750f;">{{ epidemicInf.currentConfirmedCount }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            现存确诊
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>较昨日</p>
                                <p style="color: #51698f;">{{ (epidemicInf.deadIncr > 0 ? "+" : "") + epidemicInf.deadIncr}}</p> 
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #51698f;">{{ epidemicInf.deadCount }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            累计死亡
                        </div>
                    </nut-grid-item>
                </nut-grid>
            </div>
        </div>
        <div class="profile">
            <div style="margin-top: 2vh; color: #3f3f3f;">校内疫情数据</div>
            <div>
                <nut-grid column-num="2" :border="false">
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>健康码</p>
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #4cdc71;">{{ inf1.count }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            绿码
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>健康码</p> 
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #fdb927;">{{ inf2.count }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            黄码
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>健康码</p>
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #fe4d55;">{{ inf3.count }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            红码
                        </div>
                    </nut-grid-item>
                    <nut-grid-item>
                        <div style="font-size: xx-small;">
                            <div style="display: flex;">
                                <p>健康码</p>
                            </div>
                        </div>
                        <div style="font-size: large; font-weight: bold; color: #b027ff;">{{ inf4.count }}</div>
                        <div style="font-size: x-small; font-weight: bold;">
                            紫码
                        </div>
                    </nut-grid-item>
                </nut-grid>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from "vue";
import common from '../Common.vue'
import QRCode from 'qrcodejs2'
import axios from "axios";
import { Toast } from '@nutui/nutui';

export default {
    
    components: {},
    setup() {
        let profile = ref({
            id: "",
            name: "",
            sex: 1,
            password: "",
            status: 1,
            temperature: 39.5,
            virustest: "测试核酸检测信息",
            role: 0,
            trip: "暂无行程"
        });
        let inf = common.getLoginState();
        // 获取全局变量中存的登录信息
        let id = ref(inf.id);
        let role = ref(inf.role);
        let tipTextInf = ref({
            style: "float: center; color: #519dff; font-weight: bold;",
            text: "健康码为绿码"
        })
        const epidemicInf = ref({});
        const inf1 = ref({count: 0});
        const inf2 = ref({count: 0});
        const inf3 = ref({count: 0});
        const inf4 = ref({count: 0});
        // 获取校内疫情数据
        axios
            .post(common.apiAdmission + "/api/findStatus")
            .then((res) => {
                res.data.sort((x, y) => {
                    return x.status - y.status;
                });
                for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i].status == 0) 
                        inf1.value.count = res.data[i].count;
                    if (res.data[i].status == 1) 
                        inf2.value.count = res.data[i].count;
                    if (res.data[i].status == 2) 
                        inf3.value.count = res.data[i].count;
                    if (res.data[i].status == 3) 
                        inf4.value.count = res.data[i].count;
                    console.log(res.data)
                }
                
            });
        // 获取全国疫情数据
        axios
            .get("https://file1.dxycdn.com/2022/0613/016/4823117493032724553-135.json")
            .then((res) => {
                epidemicInf.value = res.data.data[res.data.data.length - 1];
                // console.log(res.data.data[res.data.data.length - 1]);
            })
            .catch((err) => {
                console.log(err);
            });

        // 从后端获取用户信息
        axios
            .post(common.apiUrl + "/api/findById", null, {params: {
                id: inf.id
            }})
            .then((res) => {
                // console.log(res);
                // 将用户信息初始化
                profile.value = res.data;
                // 生成二维码
                let colorD = "#4cdc71";
                // 根据状态设置二维码颜色
                if ( res.data.status == 1) {
                    colorD = "#fdb927"
                } else if ( res.data.status == 2) {
                    colorD = "#fe4d55"
                } else if ( res.data.status == 3) {
                    colorD = "#b027ff"
                }
                new QRCode(document.getElementById("qrcode"), {
                    text: JSON.stringify(res.data),
                    width: 200,
                    height: 200,
                    colorDark: colorD, //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                })
                // 更改提示信息
                // 如果是学生，可进行请假
                if (role.value == 0) {
                    tipTextInf.value.text += "，可点我进行请假";
                    if (res.data.status != 0) {
                        tipTextInf.value.text = "健康码异常，等着隔离吧你";
                        tipTextInf.value.style = "float: center; color: #ff2525; font-weight: bold;"
                    }
                } else if (role.value == 1) { // 是老师 则显示的文本
                    tipTextInf.value.text += "，可正常进行教学";
                     if (res.data.status != 0) {
                        tipTextInf.value.text = "健康码异常，等着隔离吧你";
                        tipTextInf.value.style = "float: center; color: #ff2525; font-weight: bold;"
                    }
                } else if (role.value == 2) {// 辅导员 显示的文本
                    tipTextInf.value.text += "，点击我给学生批假";
                    if (res.data.status != 0) {
                        tipTextInf.value.text = "健康码异常，等着隔离吧你";
                        tipTextInf.value.style = "float: center; color: #ff2525; font-weight: bold;"
                    }
                }
                
            });
        return {
            id,
            role,
            profile,
            tipTextInf,
            epidemicInf,

            inf1,
            inf2,
            inf3,
            inf4
        };
    },
    methods: {
        toRest: function(){
            if (this.profile.status != 0) {
                Toast.fail("健康码异常！")
            } else {
                // TODO 跳转至请假界面
                if (this.profile.role == 0)
                    this.$router.push('apply');
                else 
                    this.$router.push('admission');
            }
        },
        toHealthCommit: function() {
            this.$router.push('healthcommit');
        }
    }
};
</script>

<style>
    body {
        background-color: rgb(165, 126, 255);
    }
    #user {
        width: 100%;
        height: 150vh;
        display: flex;
        /* justify-content: center; */
        align-items: center;
        flex-direction: column;
    }
    .profile {
        width: 80%;
        padding: 0px 2rem 0px 2rem;
        /* height: 10vh; */
        background-color: #ffffff;
        /* overflow: scroll; */
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 1px 5px rgba(48, 48, 48, 0.5);
        margin-top: 2vh;
    }
    .qr-style {
        padding: 1vh;
        background-color: #fff;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 1px 1px 5px rgba(48, 48, 48, 0.5);
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
</style>